<%--
  Created by IntelliJ IDEA.
  User: a
  Date: 2025/8/29
  Time: 11:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!-- 引入jQuery库，版本1.8.3 -->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        // 文档加载完成后执行的函数
        $(document).ready(function () {
            // 初始化显示第一页数据
            show(1);
        });

        // 事件委托：为动态生成的按钮添加点击事件处理
        // 当点击任何带有alt属性的input元素时执行
        $(document).on("click","input[alt]",function () {
            // 获取被点击按钮的alt属性值（页码）并调用show函数
            show($(this).attr("alt"));
        })

        // 显示分页数据的主要函数
        function show(indexpage){
            // 发送AJAX GET请求获取分页数据
            $.get("wo/getListByPage",{"indexpage":indexpage},function (ph) {
                // 【注意】此行代码无实际作用，仅将ph对象转为JSON字符串但未使用
                JSON.stringify(ph);

                // 1. 清空表格主体并填充新数据
                $("tbody").empty(); // 清空tbody中的所有行

                // 遍历返回的数据列表（ph.listIndex）
                for (var i = 0; i <ph.listIndex.length ; i++) {
                    var obj=ph.listIndex[i]; // 获取当前工单对象

                    // 创建表格行并填充数据
                    // 注意：此处使用<th>用于数据单元格，通常应用<td>
                    $("            <tr>\n" +
                        "                <th>"+obj.id+"</th>\n" +          // 工单编号
                        "                <th>"+obj.pname+"</th>\n" +       // 项目名称
                        "                <th>"+obj.executor+"</th>\n" +    // 执行人
                        "                <th>"+obj.description+"</th>\n" + // 任务描述
                        "                <th>"+obj.orderlevel+"级</th>\n" + // 级别（添加了"级"文字）
                        "                <th>"+obj.createDate+"</th>\n" +  // 创建时间
                        "            </tr>").appendTo("tbody"); // 将行添加到表格主体
                }

                // 2. 更新分页导航按钮
                $("tfoot").empty(); // 清空页脚中的分页按钮

                // 如果不是第一页，显示"首页"和"上一页"按钮
                if(ph.pageIndex!=1){
                    // 首页按钮：alt属性值为1（第一页）
                    $("<input type='button' value='首页' alt='1'/>").appendTo("tfoot");
                    // 上一页按钮：alt属性值为当前页-1
                    $("<input type='button' value='上一页' alt='"+(ph.pageIndex-1)+"'/>").appendTo("tfoot");
                }

                // 如果不是最后一页，显示"下一页"和"尾页"按钮
                if(ph.pageIndex!=ph.pageCount){
                    // 下一页按钮：alt属性值为当前页+1
                    $("<input type='button' value='下一页' alt='"+(ph.pageIndex+1)+"'/>").appendTo("tfoot");
                    // 尾页按钮：alt属性值为总页数
                    $("<input type='button' value='尾页' alt='"+ph.pageCount+"'/>").appendTo("tfoot");
                }
            });
        }

    </script>
</head>
<body>
<!-- 工单列表表格 -->
<table>
    <caption>企业工单列表</caption> <!-- 表格标题 -->
    <thead> <!-- 表头 -->
    <tr>
        <th>工单编号</th>   <!-- 列标题 -->
        <th>项目名称</th>
        <th>执行人</th>
        <th>任务描述</th>
        <th>级别</th>
        <th>创建时间</th>
    </tr>
    </thead>
    <tbody></tbody> <!-- 表格主体，用于动态填充数据 -->
    <tfoot></tfoot> <!-- 表格页脚，用于放置分页导航按钮 -->
</table>
</body>
</html>